<template>
	<view class="withdrawal-account-container">
	<up-navbar :title="t('Withdrawal account')" @click="goWithdraw" :autoBack="true">
							<template #left>
							  <view class="nav-back-btn">
							    <image class="back-icon" src="@/static/img/left.png"></image>
							  </view>
							</template>
						</up-navbar>
		
		<view class="header-section">
			<view class="title-section">
				<text class="main-title">{{t('Withdrawal')}}</text>
				<text class="main-title">{{t('Account')}}</text>
			</view>
			<view class="credit-card-3d">
				<view class="card-body">
					<view class="card-chip"></view>
					<view class="card-logo"></view>
					<view class="card-stripe"></view>
				</view>
			</view>
		</view>
		
		<view class="form-section">
			<view class="input-group" v-if="baseData.paymentMethod === 'bkash'">
				<text class="input-label">{{t('Select Bank')}}</text>
				<view class="bank-select-input" @click="showBankSelector">
					<input 
						v-model="baseData.cardForm.ifsc" 
						type="text"
						:placeholder="t('Please select bank')"
						class="form-input bank-input"
						readonly
						disabled="true"
					/>
					<text class="arrow-icon">›</text>
				</view>
			</view>
			
			<view class="input-group" v-if="baseData.paymentMethod === 'nagad'">
				<text class="input-label">{{t('Select Wallet')}}</text>
				<view class="bank-select-input" @click="showWalletSelector">
					<input 
						v-model="baseData.cardForm.ifsc" 
						type="text"
						:placeholder="t('Please select wallet')"
						class="form-input bank-input"
						readonly
					/>
					<text class="arrow-icon">›</text>
				</view>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Name')}}</text>
				<input 
					v-model="baseData.cardForm.holder_name" 
					type="text"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Number')}}</text>
				<input 
					v-model="baseData.cardForm.account_num" 
					type="text"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Email')}}</text>
				<input 
					v-model="baseData.cardForm.accEmail" 
					type="email"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Phone')}}</text>
				<input 
					v-model="baseData.cardForm.acc_phone" 
					type="tel"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
		</view>

		
		<view class="submit-section">
			<view class="submit-button" @click="addBank">
				<text class="submit-text">{{t('Save')}}</text>
			</view>
		</view>

		
		<view class="note-section">
			<text class="note-title">{{t('Important Notes')}}</text>
			<text class="note-text">• {{t('Please ensure all information is accurate')}}</text>
			<text class="note-text">• {{t('Account number and phone number must be 10 digits and start with 3')}}</text>
			<text class="note-text">• {{t('Account holder name should contain only letters')}}</text>
			<text class="note-text">• {{t('Email format must be valid')}}</text>
		</view>

		
		<up-popup :show="showBankPopup" v-model="baseData.cardForm.bankName" mode="bottom" border-radius="10" class="custom-width-bottom">
			<view class="bank-popup">
				<view class="bank-popup-header">
					<text class="bank-popup-title">{{t('Select Bank')}}</text>
					<view class="bank-popup-close" @click="closeBankPopup">
						<up-icon name="close" size="1.5rem"></up-icon>
					</view>
				</view>

				<scroll-view scroll-y="true" class="bank-list" style="max-height: 60vh;">
					<view class="bank-item" v-for="(bank, index) in bankName" :key="index" @click="selectBank(bank)">
						{{ bank.label }}
					</view>
				</scroll-view>
			</view>
		</up-popup>

		
		<up-popup :show="showWalletPopup" v-model="baseData.cardForm.walletName" mode="bottom" border-radius="10" class="custom-width-bottom">
			<view class="bank-popup">
				<view class="bank-popup-header">
					<text class="bank-popup-title">{{t('Select Wallet')}}</text>
					<view class="bank-popup-close" @click="closeWalletPopup">
						<up-icon name="close" size="1.5rem"></up-icon>
					</view>
				</view>

				<scroll-view scroll-y="true" class="bank-list" style="max-height: 60vh;">
					<view class="bank-item" v-for="(bank, index) in walletName" :key="index" @click="selectWallet(bank)">
						{{ bank.label }}
					</view>
				</scroll-view>
			</view>
		</up-popup>
	</view>
</template>

<script setup lang="ts">
	import { useI18n } from 'vue-i18n';
	import { onMounted, reactive, ref } from 'vue'
	import { setBankCard, bankCardInfo } from '@/api/user'

	const { t } = useI18n();
	const countryId = ref(null);
	const baseData = reactive({
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		paymentMethod: 'bkash',
		cardForm: {
			ifsc: null,
			holder_name: null,
			account_num: null,
			country: 5,
			accEmail: '',
			acc_phone: null,
			ac_type: 2,
			platform: 1
		}
	})
	const showWalletPopup = ref(false)
	const walletName = ref([
		{ label: "EASYPAISA", value: 'EASYPAISA' },
		{ label: "JAZZCASH", value: 'JAZZCASH' },
	])
	const bankName = ref([
		{ label: "ALBARAKA ISLAMIC BANK", value: 1 },
		{ label: "ALLIED BANK LIMITED", value: 2 },
		{ label: "APNA MICRO FINANCE BANK", value: 3 },
		{ label: "ASKARI BANK LIMITED", value: 4 },
		{ label: "BANK AL HABIB LIMITED", value: 5 },
		{ label: "BANK ALFALAH LIMITED", value: 6 },
		{ label: "BANK ISLAMI PAKISTAN LIMITED", value: 7 },
		{ label: "BANK OF KHYBER", value: 8 },
		{ label: "CITI BANK NA", value: 9 },
		{ label: "DUBAI ISLAMIC BANK PAKISTAN LIMITED", value: 10 },
		{ label: "FAYSAL BANK LIMITED", value: 11 },
		{ label: "FINCA MICRO FINANCE BANK", value: 12 },
		{ label: "FIRST WOMEN BANK LIMITED", value: 13 },
		{ label: "HABIB BANK LIMITED", value: 14 },
		{ label: "HABIB METROPOLITAN BANK LIMITED", value: 15 },
		{ label: "JS BANK LIMITED", value: 16 },
		{ label: "MCB BANK LIMITED", value: 17 },
		{ label: "MCB ISLAMIC", value: 18 },
		{ label: "MEEZAN BANK", value: 19 },
		{ label: "NATIONAL BANK OF PAKISTAN", value: 20 },
		{ label: "NIB BANK LIMITED", value: 21 },
		{ label: "NRSP MICRO FINANCE BANK", value: 22 },
		{ label: "SAMBA BANK LIMITED", value: 23 },
		{ label: "SILK BANK LIMITED", value: 24 },
		{ label: "SINDH BANK LIMITED", value: 25 },
		{ label: "SONERI BANK LIMITED", value: 26 },
		{ label: "STANDARD CHARTERED BANK LTD", value: 27 },
		{ label: "SUMMIT BANK LIMITED", value: 28 },
		{ label: "TELENOR MICRO FINANCE BANK", value: 29 },
		{ label: "THE BANK OF PUNJAB", value: 30 },
		{ label: "U MICRO FINANCE BANK", value: 31 },
		{ label: "UNITED BANK LIMITED", value: 32 },
		{ label: "ADVANS PAKISTAN MICRO FINANCE BANK", value: 33 },
		{ label: "HBL MICRO FINANCE BANK", value: 34 },
		{ label: "INDUSTRIAL AND COMMERCIAL BANK OF CHINA LIMITED", value: 35 },
		{ label: "KHUSHHALI MICRO FINANCE BANK", value: 36 },
		{ label: "MCB ARIF HABIB", value: 37 }
	]);
	const showBankPopup = ref(false);

	const switchPaymentMethod = async (method) => {
		baseData.paymentMethod = method;
		countryId.value = 5;

		const ress = await bankCardInfo({ country: countryId.value })
		if (ress.code == 0) {
			baseData.cardForm = ress.data ? ress.data : {
				ifsc: null,
				holder_name: null,
				account_num: null,
			}
		}

	}

	const showBankSelector = () => {
		showBankPopup.value = true;
	}

	const showWalletSelector = () => {
		showWalletPopup.value = true;
	}

	const closeBankPopup = () => {
		showBankPopup.value = false;
	}

	const closeWalletPopup = () => {
		showWalletPopup.value = false;
	}

	const selectBank = (bank) => {
		baseData.cardForm.ifsc = bank.label;
		showBankPopup.value = false;
	}

	const selectWallet = (bank) => {
		baseData.cardForm.ifsc = bank.label;
		showWalletPopup.value = false;
	}

	const createDefaultCardForm = ref({
		ifsc: null,
		holder_name: null,
		account_num: null,
		country: 5,
		acc_phone: null,
		ac_type: 2,
		platform: 1,
		ext: { accEmail: null }
	})
	const addBank = async () => {
		if (!baseData.cardForm.account_num) {
			uni.showToast({
				title: t('Please fill in') + t('Account Number'),
				icon: "none"
			})
			return
		}
		const regex = /^\d+$/
		if (!regex.test(baseData.cardForm?.account_num)) {
			uni.showToast({
				title: t('account must be numeric'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.holder_name) {
			uni.showToast({
				title: t('Please fill in') + t('Account Holder Name'),
				icon: "none"
			})
			return
		}
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
		if (!emailRegex.test(baseData.cardForm.accEmail)) {
			uni.showToast({
				title: t('Invalid Email Format'),
				icon: 'none',
			})
			return
		}
		if (!baseData.cardForm.acc_phone) {
			uni.showToast({
				title: t('Please fill in') + t('Phone'),
				icon: "none"
			})
			return
		}
		const holder_nameregex = /^[A-Za-z\s]+$/;
		if (!holder_nameregex.test(baseData.cardForm?.holder_name)) {
			uni.showToast({
				title: t('Account name error'),
				icon: "none"
			})
			return
		}

		const regexNum = /^3\d{9}$/; 

		const accPhone = baseData.cardForm?.acc_phone;
		const accountNum = baseData.cardForm?.account_num;

		if (!regexNum.test(accPhone) || !regexNum.test(accountNum)) {
			uni.showToast({
				title: t('Account number and phone number must be 10 digits and start with 3'),
				icon: "none"
			});
			return;
		}
		baseData.cardForm.holder_name = baseData.cardForm.holder_name?.replace(/\s*/g, '');
		baseData.cardForm.country = 5;
		baseData.cardForm.ac_type = 2;
		createDefaultCardForm.value.ac_type = baseData.cardForm.ac_type;
		createDefaultCardForm.value.country = baseData.cardForm.country;
		createDefaultCardForm.value.holder_name = baseData.cardForm.holder_name;
		createDefaultCardForm.value.acc_phone = baseData.cardForm.acc_phone;
		createDefaultCardForm.value.ifsc = baseData.cardForm.ifsc;
		createDefaultCardForm.value.account_num = baseData.cardForm.account_num;
		createDefaultCardForm.value.ext.accEmail = baseData.cardForm.accEmail;
		createDefaultCardForm.value.platform = baseData.cardForm.platform;

		const res = await setBankCard(createDefaultCardForm.value)

		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
			goWithdraw()
		} else {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
		}
	}
		const goWithdraw = () => {
			window.top?.postMessage('/pages/withdraw/index', window.location.origin)
			uni.navigateTo({
			  url: '/pages/withdraw/index',
			})
		}
	const getCard = async () => {
		const ress = await bankCardInfo({ country: 5, platform: baseData.cardForm.platform });
		if (ress.code === 0) {
			let form = {
				ifsc: null,
				holder_name: null,
				account_num: null,
				accEmail: null,
				acc_phone: null,
			};

			if (Array.isArray(ress.data) && ress.data.length > 0) {
				const found = ress.data.find(item => item.ac_type === 2);
				if (found) form = found;
			}

			form.platform = uni.getStorageSync('platform');
			baseData.cardForm = form;
			baseData.cardForm.accEmail = form?.ext.accEmail;
			console.log("baseData.cardForm", baseData.cardForm);
		}
	};

	onMounted(() => {
		
		uni.setNavigationBarTitle({
			title: 'Quovo ' + t('Earn money so easy') + '!'
		});
		baseData.cardForm.platform = uni.getStorageSync('platform');

		getCard()
	});
</script>

<style lang="scss" scoped>
@import '@/styles/bank.scss';
</style>